<template>
  <Modal :mask-closable="false" title="模具台账打印" width="1200px" v-model="printVisible"
         :footer-hide="true"
         class="modal-wrap-layout">
    <Row>
      <!-- 单个打印区域 -->
      <section id="equipmentsprintOne" v-show="printMode === 1"
               style="display: flex;flex-wrap: wrap;justify-content: center;overflow-y: auto;height: 60vh">
        <div class="bigBorder" v-for="(item, index) of record" :key="'a' + index">
          <div class="big-item-Border">
            <div class="cro_left_top"></div>
            <div class="cro_right_top"></div>
            <div class="cro_left_bottom"></div>
            <div class="cro_right_bottom"></div>
            <h1 class="print-big-title">
              模具台账档案卡
            </h1>
            <Row class="bigRow">
              <Col :span="15">
                <Col :span="24" class="print-big-item">
                  <span class="print-big-item-title">模具类型</span>
                  <span class="print-big-item-content f-w-700">{{ item.moldModel || '--' }}</span>
                </Col>
                <Col :span="24" class="print-big-item">
                  <span class="print-big-item-title">模具名称</span>
                  <span class="print-big-item-content f-w-700">{{ item.moldName || '--' }}</span>
                </Col>
                <Col :span="24" class="print-big-item">
                  <span class="print-big-item-title">模具编号</span>
                  <span class="print-big-item-content f-w-700">{{ item.moldCode || '--' }}</span>
                </Col>
                <Col :span="24" class="print-big-item">
                  <span class="print-big-item-title">料厚(mm)</span>
                  <span class="print-big-item-content">{{ item.thickness || '--' }}</span>
                </Col>
                <Col :span="24" class="print-big-item">
                  <span class="print-big-item-title">步长(mm)</span>
                  <span class="print-big-item-content">{{ item.lengths || '--' }}</span>
                </Col>
                <Col :span="24" class="print-big-item">
                  <span class="print-big-item-title">闭模高度(mm)</span>
                  <span class="print-big-item-content">{{ item.closedMoldHeight || '--' }}</span>
                </Col>
              </Col>
              <Col :span="9">
                <Col :span="24">
                  <Col :span="24" class="print-big-item">
                    <span class="print-big-item-title">库区</span>
                    <span class="print-big-item-content">{{ item.reservoirArea }}</span>
                  </Col>
                  <Col :span="24" class="print-big-item">
                    <span class="print-big-item-title">库位</span>
                    <span class="print-big-item-content">{{ item.warehouseLocation }}</span>
                  </Col>
                </Col>
                <Col :span="24" align="center" class="print-qrcode">
                  <div style="background: #fff;padding: 20px 0">
                    <div :id="`qrcode-${index}`" :ref="`qrcode-${index}`"></div>
                  </div>
                </Col>
              </Col>
            </Row>
          </div>
        </div>
      </section>


      <Row style="margin: 5px">
        <Col align="center">
          <Button v-print="printMode === 1 ? '#equipmentsprintOne' : '#equipmentsprintBatch'" type="primary">打印</Button>
          <!--<Button @click="handlePrint" type="primary">选择打印</Button>-->
        </Col>
      </Row>
    </Row>
  </Modal>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  name: "ledgerPrintModal",
  data() {
    return {
      type: '',
      printVisible: false,
      record: [],
      printMode: 1, // 1: 单个打印, 2: 批量打印
    }
  },
  methods: {
    handlePrint() {
      const target = this.printMode === 1 ? '#equipmentsprintOne' : '#equipmentsprintBatch';
      if (document.querySelector(target)) {
        this.$print(target); // 手动触发打印
      } else {
        console.error('打印目标元素未找到:', target);
      }
    },
    show(record, mode) {
      this.record = record;
      this.printMode = mode || 1;
      this.printVisible = true;
      this.$nextTick(() => {
        if (this.printMode === 1) {
          this.createSingleQRCode();
        } else {
          this.createBatchQRCode();
        }
      });
    },
    createSingleQRCode() {
      this.record.forEach((item, index) => {
        const refName = `qrcode-${index}`;
        if (this.$refs[refName] && this.$refs[refName][0]) {
          this.$refs[refName][0].innerHTML = '';
          let text = item.moldCode;
          // 使用Promise确保二维码生成完成
          new Promise(resolve => {
            setTimeout(() => {
              new QRCode(this.$refs[refName][0], {
                text: text,
                width: 130,
                height: 130,
                colorDark: '#000000',
                colorLight: '#fff',
                correctLevel: QRCode.CorrectLevel.H,
              });
              resolve();
            }, 500);
          });
        }
      });
    },
    createBatchQRCode() {
      this.record.forEach((item, index) => {
        const refName = `batch-qrcode-${index}`;
        if (this.$refs[refName] && this.$refs[refName][0]) {
          this.$refs[refName][0].innerHTML = '';
          let text = item.moldCode;
          // 使用Promise确保二维码生成完成
          new Promise(resolve => {
            setTimeout(() => {
              new QRCode(this.$refs[refName][0], {
                text: text,
                width: 100,
                height: 100,
                colorDark: '#000000',
                colorLight: '#fff',
                correctLevel: QRCode.CorrectLevel.H,
              });
              resolve();
            }, 500);
          });
        }
      });
    }
  }
}
</script>

<style media="print">
@page {
  size: A4;
  margin: 10mm;
}

.batch-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.batch-item {
  flex: 0 0 calc(50% - 15px); /* 每页显示2列 */
  page-break-inside: avoid; /* 防止元素被分页截断 */
}

@media print {
  #equipmentsprintOne, #equipmentsprintBatch {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .batch-item {
    flex: 0 0 calc(50% - 10px);
    margin-bottom: 10px;
  }
}
</style>

<style lang="scss" scoped>
.bigBorder {
  width: 14cm;
  height: 9cm;
  padding: 12px;
  margin-bottom: 0.1cm;
  margin-right: 0.1cm;

  .big-item-Border {
    position: relative;
    border: 2px solid #000;
    height: 100%;

    .cro_left_top,
    .cro_right_top,
    .cro_left_bottom,
    .cro_right_bottom {
      position: absolute;
      width: 20px;
      height: 20px;
      z-index: 999;
    }

    .cro_left_top {
      top: -2px;
      left: -2px;
      border-radius: 0px 0px 20px 0px;
      border-bottom: 2px solid #000;
      border-right: 2px solid #000;
    }

    .cro_right_top {
      top: -2px;
      right: -2px;
      border-radius: 0px 0px 0px 20px;
      border-bottom: 2px solid #000;
      border-left: 2px solid #000;
    }

    .cro_left_bottom {
      left: -2px;
      bottom: -2px;
      border-radius: 0px 20px 0px 0px;
      border-top: 2px solid #000;
      border-right: 2px solid #000;
    }

    .cro_right_bottom {
      right: -2px;
      bottom: -2px;
      border-radius: 20px 0px 0px 0px;
      border-top: 2px solid #000;
      border-left: 2px solid #000;
    }
  }

  .bigRow {
    padding: 0px 15px;
  }
}

.print-big-title {
  font-size: 26px;
  font-weight: bold;
  padding: 20px 0;
  text-align: center;
  color: #000 !important;
  // letter-spacing: 6px;
}

.print-big-item {
  color: #000 !important;
  padding: 4px 0;

  .print-big-item-title {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 33%;
    color: #000 !important;
    text-align-last: justify;
  }

  .print-big-item-content {
    font-size: 14px;
    display: inline-block;
    margin-left: 3%;
    width: 60%;
    text-align: center;
    color: #000 !important;
    border: 1px solid #000;

  }

  .print-big-item-title1 {
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    width: 65%;
    color: #000 !important;
    text-align-last: justify;
  }

  .print-big-item-content1 {
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    text-align: center;
    margin-left: 2%;
    width: 33%;
    color: #000 !important;
    border: 1px solid #000;
  }
}

.print-big-item1 {
  color: #000 !important;
  padding: 12px 0;

  .print-qrcode {
    //padding-top: 10px;
  }

  .print-big-item-title {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 33%;
    color: #000 !important;
    text-align-last: justify;
  }

  .print-big-item-content {
    font-size: 14px;
    display: inline-block;
    font-weight: 600;
    margin-left: 3%;
    width: 60%;
    text-align: center;
    color: #000 !important;
    border: 1px solid #000;

  }
}

.f-w-700 {
  font-weight: 700;
}
</style>
